<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧1</title>
    <style>
        .top{
            background-color: #5aa4ae;
            height: 120px;
            font-size: 40px;
            color: #fff;
            font-weight: bold;
            position: fixed;
            top: 0px;
            /*100%的视口宽度 viewport width */
            /*100%的视口高度 viewport height */
            width: 100vw;
        }
        .main{
            margin-top: 130px;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, atque consectetur dignissimos enim ex minus
        nesciunt reprehenderit repudiandae tempore tenetur! Consectetur culpa cumque dignissimos fuga hic impedit
        pariatur quod rem!
    </div>
    <div>Accusamus autem odio quis sed ut. Dolores illo impedit minima minus obcaecati odio reiciendis ut vitae
        voluptate! Aliquid animi, eaque eum fugit, in itaque perferendis rem reprehenderit, sapiente totam veritatis?
    </div>
    <div>Assumenda at aut in nam nisi nulla optio sapiente temporibus voluptate voluptates. Beatae corporis culpa,
        cumque deleniti enim iusto minus nihil nobis quaerat, quam quibusdam quisquam sequi sit temporibus voluptatibus?
    </div>
    <div>Aliquid corporis eveniet illum, in ipsam minus modi perferendis quidem ratione rem, repellat sapiente sunt!
        Autem, consectetur, debitis delectus, ea earum enim esse inventore ipsum laborum placeat repellendus similique
        ut?
    </div>
    <div>Amet assumenda blanditiis, consequuntur corporis, dolores eaque et harum nemo neque, nesciunt obcaecati
        possimus praesentium quae quam quos unde ut veritatis voluptate! Dignissimos doloremque et explicabo harum,
        impedit nam tempora.
    </div>
    <div>Delectus illum molestias neque odio quam quisquam ratione rem saepe. Alias, architecto corporis delectus
        ducimus fugit labore molestias numquam quam sint voluptatibus. Accusamus earum fugit labore odit saepe.
        Consequatur, voluptatibus!
    </div>
    <div>Animi commodi deserunt doloribus illo magni, odit qui vero! Alias consectetur delectus deleniti deserunt
        ducimus, eos expedita fugiat impedit ipsum, itaque iusto maxime molestiae nemo, odio optio ratione soluta unde.
    </div>
    <div>Ab, amet autem cupiditate dolorem excepturi incidunt iusto labore maiores maxime mollitia nesciunt nisi odit
        placeat quisquam repudiandae saepe sequi sunt vero vitae voluptate. Explicabo quasi quis quo ut voluptatum.
    </div>
    <div>Aliquid, amet dolorem eligendi est excepturi necessitatibus sit vero. Beatae ipsam obcaecati saepe sit velit?
        Aliquam amet debitis perferendis quia. Aliquam dignissimos dolorem illo ipsum iure quaerat rem. Excepturi,
        sequi!
    </div>
    <div>Alias amet architecto aspernatur autem beatae blanditiis dolorum earum enim error, exercitationem ipsam itaque
        laborum obcaecati, quae, quam quia quisquam quo reprehenderit sint sit veritatis vero vitae voluptatibus.
        Consectetur, nesciunt?
    </div>
    <div>Accusantium asperiores consequuntur voluptas. Accusamus accusantium architecto blanditiis consequuntur corporis
        culpa delectus eligendi enim, error fuga in laudantium minima minus natus necessitatibus nesciunt numquam odio
        perferendis possimus quaerat quo soluta?
    </div>
    <div>A ad alias amet aperiam commodi, culpa debitis dignissimos distinctio doloremque facere iste iusto minima
        mollitia nisi officia officiis perspiciatis provident quam quia quibusdam quidem sed soluta suscipit ullam
        veniam?
    </div>
    <div>Adipisci alias beatae consequatur corporis delectus ea est, minima, molestias perferendis praesentium quasi quo
        temporibus, vel? Alias est hic nam necessitatibus nemo nulla perspiciatis placeat rerum ullam vel! Eum,
        voluptas!
    </div>
    <div>Ab dicta dolorum itaque libero neque odio placeat quod? Ab ad animi autem consequatur deserunt dignissimos
        dolores doloribus ea excepturi magni natus necessitatibus odio quae quam quod, sit tenetur voluptas?
    </div>
    <div>Aliquam aliquid blanditiis, deserunt dolorum, et exercitationem inventore iusto mollitia officiis perferendis
        soluta totam. Ad, assumenda beatae dignissimos exercitationem facere labore modi nulla perferendis voluptate
        voluptatum! Ad mollitia nostrum veniam?
    </div>
    <div>Asperiores quisquam ratione ullam velit. Commodi, consequuntur dicta ea et exercitationem, fugiat illum
        molestias numquam obcaecati perspiciatis provident quaerat quas qui quia quod repudiandae rerum? Commodi
        consectetur facere mollitia placeat!
    </div>
    <div>Ex excepturi vero vitae. Accusantium aliquam, corporis delectus dolore dolores doloribus earum enim eos
        explicabo illo illum ipsam iure labore libero maiores nemo non quod quos recusandae reiciendis repellendus
        repudiandae?
    </div>
    <div>Consequuntur doloribus eaque esse est et iure maiores, neque odit, officia quaerat recusandae rerum, sed sit
        voluptatem voluptatum. Ad cum doloribus facere harum ipsam maiores veniam? Amet, animi, debitis. Dolore.
    </div>
    <div>Alias animi autem corporis cupiditate delectus dignissimos impedit itaque, maxime, natus pariatur provident
        reprehenderit repudiandae rerum sint temporibus unde vitae! Accusamus aperiam aspernatur commodi, consectetur
        deserunt necessitatibus odio officiis ut?
    </div>
    <div>Aut est magni maiores nulla officiis quaerat quos repudiandae, saepe velit voluptatum. Accusantium consequatur
        corporis delectus eum explicabo facere illo illum minus natus nihil obcaecati perferendis quisquam ratione
        soluta, veniam?
    </div>
    <div>A alias amet consequuntur deleniti ducimus enim ipsam laudantium maiores minima nam necessitatibus, obcaecati
        quaerat quisquam, sint totam vel voluptates! Ad, dicta distinctio ex explicabo ipsum laudantium odio ratione
        voluptatem.
    </div>
    <div>Ad assumenda eos ipsam itaque maiores! Amet atque cumque doloribus ea, eos et, eum harum iste libero maiores
        natus nesciunt obcaecati omnis optio porro reprehenderit sapiente suscipit tempora totam ullam.
    </div>
    <div>Aliquid esse necessitatibus obcaecati. Adipisci blanditiis consequatur corporis dolor sequi? A accusamus
        commodi culpa debitis ipsa, ipsam magni officiis quo voluptate voluptatem! Asperiores culpa eveniet
        exercitationem, facilis incidunt necessitatibus reprehenderit?
    </div>
    <div>Eaque esse nihil odio saepe sit? Aliquid blanditiis consequatur culpa deleniti dignissimos doloribus hic illo
        illum magnam, maiores odio praesentium quod reprehenderit sequi sit tempore, velit vero. Earum, inventore,
        vitae.
    </div>
    <div>Ab adipisci at deleniti dolorem, dolores eaque eos explicabo facere fuga fugit impedit ipsa itaque magnam minus
        necessitatibus omnis perferendis porro praesentium quia reiciendis repellat reprehenderit sapiente similique sit
        voluptates.
    </div>
    <div>Aperiam architecto, consequuntur cupiditate doloremque dolores earum enim harum illum incidunt inventore maxime
        molestias nihil nisi nostrum officia perspiciatis quam quia quo quos repellat rerum tenetur vel velit vitae
        voluptatem!
    </div>
    <div>Cupiditate id, incidunt natus obcaecati odit quia sapiente! Consequuntur esse facere illum iste sed. Porro,
        quibusdam, temporibus! Consequatur dolores doloribus ducimus esse expedita molestias qui, quidem quos repellat
        similique, temporibus?
    </div>
    <div>Amet consectetur eligendi maxime nam nisi quisquam quod reiciendis reprehenderit? Accusantium deleniti odio,
        pariatur qui saepe sunt tenetur totam vel? Ex exercitationem itaque minus, natus nulla obcaecati quasi quos
        tenetur!
    </div>
    <div>Assumenda consequuntur dignissimos doloremque earum esse eveniet excepturi illo incidunt ipsam iure, laudantium
        minus, pariatur quo rerum similique sit tempora. Ab aliquid aspernatur debitis molestias nisi quaerat
        reprehenderit tenetur voluptas!
    </div>
    <div>Eaque labore nulla placeat quam. At, autem consequuntur cumque dignissimos ducimus eaque eius eos expedita
        harum hic ipsum natus odit officiis omnis perspiciatis quas quisquam rem tempore? Laudantium provident, tempore!
    </div>
    <div>Adipisci assumenda aut, autem consectetur dolore eius incidunt itaque iusto natus numquam, optio, porro quas
        quisquam repellat voluptas. Adipisci blanditiis delectus dolore doloribus eaque fugiat libero odio ratione
        recusandae, sequi.
    </div>
    <div>Aut consectetur culpa facilis illo minus molestiae natus ullam voluptatem. Amet debitis distinctio expedita
        explicabo fuga, illum inventore magni nihil nostrum, provident quaerat quisquam rem repellat sequi sint sit
        voluptatum?
    </div>
    <div>Aliquam facilis hic itaque nostrum porro. Dolorem, eius eligendi inventore iste suscipit vitae. Ad, animi,
        autem consectetur distinctio esse et ex illum iste magni nisi possimus quo sapiente ullam voluptates!
    </div>
    <div>Architecto dolores iusto magni quo? Aspernatur distinctio dolore et exercitationem, facilis illo iusto laborum,
        non omnis quae ratione sit! Beatae, fuga neque nobis quisquam repellendus saepe sint tenetur. Distinctio, saepe.
    </div>
    <div>Aspernatur at autem blanditiis dicta dolore eius enim eveniet exercitationem facilis, id ipsa labore maxime
        minus neque odio possimus quibusdam quis rem suscipit, unde. Eligendi laborum minima numquam quod voluptate.
    </div>
    <div>Architecto consectetur consequatur cumque distinctio error et ipsum nisi nobis, obcaecati officiis pariatur
        placeat provident quas sed suscipit? Aut consequatur ducimus iure minus odit provident tempore ullam? A,
        accusantium, ad.
    </div>
    <div>Aliquid at cum cupiditate dolores expedita facilis nisi nobis nulla omnis perspiciatis possimus quisquam
        ratione tenetur unde, voluptates! Architecto ex excepturi laudantium libero voluptate voluptates! Accusantium
        blanditiis hic nisi non.
    </div>
    <div>Animi consequuntur doloribus excepturi iure nemo vel vero voluptates. A aliquam animi deleniti deserunt
        distinctio enim excepturi, fuga laborum laudantium molestias, odit porro quae recusandae temporibus
        voluptatibus. Dolores, numquam porro.
    </div>
    <div>Ad aperiam assumenda at blanditiis cum cupiditate deleniti eligendi, hic illum laborum libero minima numquam
        officia perferendis perspiciatis quasi qui quia quibusdam quis ratione sed tenetur totam unde vero voluptas.
    </div>
    <div>Animi beatae dolorum explicabo labore omnis saepe ullam! Amet asperiores assumenda culpa cumque nostrum quidem
        temporibus voluptatibus. Ad aliquam beatae, cupiditate, et fugit officiis reiciendis similique sunt, unde
        veritatis voluptas.
    </div>
    <div>A autem deserunt dolor dolorem eaque eius eos exercitationem magnam magni maxime, mollitia nesciunt officiis
        omnis possimus quis quo recusandae rem repellendus rerum, saepe sequi similique sit tempora tenetur voluptates.
    </div>
    <div>Aliquid autem, corporis distinctio facilis, fuga minus mollitia neque, non nulla praesentium quaerat quas
        voluptatem! Aperiam cumque facilis quod rerum voluptatibus. Excepturi, expedita, vel? Cumque error esse illum
        impedit veniam.
    </div>
    <div>Expedita harum incidunt magnam officia quis, rerum saepe? Ab ea expedita illum provident, recusandae ut vitae?
        Aperiam, assumenda consequatur, culpa debitis doloremque est, excepturi labore laudantium numquam reprehenderit
        sit voluptatum.
    </div>
    <div>Aperiam asperiores consequatur earum enim, eum, id impedit ipsum obcaecati odio praesentium quo quos veritatis,
        voluptatibus. Animi et ex exercitationem, facere iure molestias quae quis rem saepe tempora ut veniam.
    </div>
    <div>Facere ipsam iure nesciunt nihil suscipit veritatis! Accusamus, animi atque cumque cupiditate dolores ducimus,
        est excepturi illum impedit magni maxime molestiae necessitatibus nulla numquam omnis perferendis placeat porro
        quae, quo.
    </div>
    <div>Ad adipisci aliquid amet architecto consequatur dolorem doloremque, dolores ducimus error expedita fuga illo
        incidunt itaque iure minima nam natus pariatur possimus quos repudiandae sapiente similique sint tempora ut
        voluptatibus.
    </div>
    <div>Commodi culpa cumque cupiditate dolor enim harum id illum laboriosam repellat sint ullam, vitae voluptas?
        Consequuntur dolor doloribus id incidunt optio praesentium quam quisquam voluptates voluptatibus. Dolore eum
        quia ratione?
    </div>
    <div>Aperiam autem consectetur enim, hic itaque natus numquam quis voluptatibus. Autem, dolore dolorem inventore non
        odit quas saepe soluta voluptate! Asperiores atque blanditiis cumque hic, magnam maxime quibusdam quos sunt?
    </div>
    <div>Adipisci dolore, excepturi fuga molestias natus nobis perferendis veniam? At, doloremque dolores eligendi magni
        modi mollitia nemo optio pariatur vero! At esse fugit impedit minima minus perspiciatis quasi vitae voluptatum!
    </div>
    <div>Aperiam assumenda atque autem consequatur corporis, delectus deleniti doloremque eos exercitationem hic in
        incidunt inventore ipsam iusto modi nesciunt, quia quisquam quos saepe sint soluta tenetur totam ullam unde
        voluptas.
    </div>
</div>
</body>
</html>